<template>
  <div id="LoginCard">
    <!-- 返回按钮 -->
    <div class="goHome" @click="$router.push('/')">
        <span class="icon-arrow-left"></span>
    </div>
    <!-- 登录注册模态框 -->
    <div class="LoginAndRegistration">
        <div class="button-hidden"></div>
        <div class="LoginAndRegistration-loge">LOGIN</div>
        <div class="" style="font-size: 15px;">&nbsp;账号密码登录</div>
        <form action="" class="form" @click.prevent="">
            <input type="text" placeholder="账号" v-model="username">
            <div class="warn">请输入5~12位内的字母和数字</div>
            <input type="password" placeholder="密码" v-model="password">
            <div class="warn">请输入6~12位内的字母和数字</div>
            <input type="submit" value="登录" class="submit" @click="check();login()">
        </form>
        <div class="LoginAndRegistration-1 clearfix">
            <ul>
                <li><a href="#">邮箱登录</a></li>
                <li style="float: right;"><a href="#">忘记密码？</a></li>
            </ul>
        </div>
        <!-- <div class="LoginAndRegistration-2">
            <ul>
                <li><a href="#"><img src="../../assets/imgs/QQ.png" alt=""></a></li>
                <li><a href="#"><img src="../../assets/imgs/微信.png" alt=""></a></li>
            </ul>
        </div> -->
        <div class="LoginAndRegistration-3">
            <div class="warn">请阅读并勾选下方协议</div>
            <input type="checkbox" id="1">
            &nbsp;&nbsp;同意《用户协议》和《隐私协议》
        </div>
    </div>
</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    name: "LoginCard",
    data() {
        return {
            username: "",
            password: "",
            flag: [1,1,1]
        }
    },
    computed: {
        ...mapState(['loginInfo']),
    },
    methods: {
        ...mapMutations(['setIsLogin']),
        getData() {
            return  {
                       username: this.username,
                       password: this.password
                    }
        },
        warnShow(flagIndex) {
            let warns = document.querySelectorAll('.warn');
            let i = flagIndex;
            if(!this.flag[i]) return;
            this.flag[i] = 0;
            warns[i].classList.add('active')
            let timer = setTimeout(() => {
                warns[i].classList.remove('active');
                this.flag[i] = 1;
            },3000)
        },
        check_username() {
            let reg = /^[0-9a-zA-Z]{5,12}$/;
            if(!reg.test(this.username)) {
                this.warnShow(0);
                return 0;
            }
            return 1;
        },
        check_password() {
            let reg = /^[0-9a-zA-Z]{6,12}$/;
            if(!reg.test(this.password)) {
                this.warnShow(1);
                return 0;
            }
            return 1;
        },
        check_checkbox() {
            let checkbox = document.querySelector('input[type=checkbox]');
            if(!checkbox.checked) {
                this.warnShow(2);
                return 0
            } 
            return 1;
           
        },
        check() {
            //检查是否勾选checkbox
            let a = this.check_checkbox();
            //验证账号格式
            let b = this.check_username();
            //验证密码格式
            let c = this.check_password();
            if(!a||!b||!c) return 0;
            return 1;

        },
        async login() {
            //判断是否满足登录条件
            if(!this.check()) return;

            await this.$axios.post('/login',this.getData()).then(
                (res) => {
                    //设置从服务端返回来的token
                    if(res.data.code==1) {
                        window.localStorage.setItem("token",res.data.data);
                        this.setIsLogin(true);
                        this.$router.push('/');
                    }
                    else 
                        this.$message.error(res.data.msg);
                }
            ).catch( (err) => {
                console.log(err);
            })
        }
    },
    mounted(){
        
    }
}
</script>

<style scoped>
/* #LoginCard {
  
} */

.goHome {
  position: fixed;
  z-index: 100;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  top: 20px;
  left: 20px;
  background-color: rgba(57, 61, 73,.3);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.goHome:hover {
    transform: scale(1.04);
}

.goHome>span {
    font-size: 20px;
}

.LoginAndRegistration {
    background-color: transparent;
    z-index: 10;
    position: fixed;
    padding: 20px;
    top: calc(50% - 270px);
    left: calc(50% - 192px);
    width: 384px;
    height: 490px;
    font-size: 14px;
    border-radius: 10px;
    line-height: 1.42857;
}


.LoginAndRegistration-loge {
    font-size: 50px;
    font-style: italic;
    font-family: 'Microsoft YaHei';
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.LoginAndRegistration form {
    margin-top: 20px;
}

.LoginAndRegistration form input {
    margin: 10px auto;
    border-radius: 20px;
    border: 1px solid #D8D8D8;
    width: 100%;
    height: 40px;
    padding: 12px;
    background-color: #2E2E2E;
    color: #fff;
    opacity: .3;
    border-radius: 20px;
    position: relative;
}

.LoginAndRegistration form input::placeholder {
  color: #ffffff;
  opacity: 1;
}

.LoginAndRegistration form .submit {
    width: 100%;
    color: #fff;
}

.LoginAndRegistration form .submit:hover {
  transform: scale(.98);
}

.LoginAndRegistration-1 ul {
    width: 100%;
}

.LoginAndRegistration-1 ul li {
    float: left;
    margin-top: 5px;
}

.LoginAndRegistration-1 ul li a:hover {
    color: #53acfe;
    ;
}

.LoginAndRegistration-2 ul {
    margin: 5px auto;
    width: 140px;
    height: 50px;
}

.LoginAndRegistration-2 ul li img {
    float: left;
    width: 50px;
    height: 50px;
    margin: 0 10px;
}
.LoginAndRegistration-3 {
    font-size: 13px; 
    margin: 25px auto; 
    position: relative;
}

label {
    position: relative;
}

input[type=checkbox]{
    display: inline-block;
    opacity: .4;
}

.warn {
    display: none;
    color: red;
    font-size: 10px;
    opacity: .6;
}

.warn.active {
    display: block;
}
</style>